<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>头部</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style type="text/css">
#uname {
	display: none;
	margin-bottom: 10px;
	line-height: 20px;
	float: left;
}

#top_left {
	float: left;
	width: 630px;
}
.searchkuang{
	float: right; 
	width : 300px;
	z-index: 2;
	position: absolute;
	right: 3px;
}

#header #top_login .sea {
	border-radius: 40px;
	background-color: #0079C1;
	width: 300px;
}

#header #top_login .sea #sea_input1 {
	height: 11px;
	width: 250px;
	padding: 4px;
	border-radius: 40px;
	border: 2px solid #0079C1;
}

#header #top_login .sea #sea_input2 {
	background-color: #0079C1;
	border: 0px;
}
#suggest{
	background-color: white;
	width: 250px;
	padding-left: 7px;	
}
</style>
<script type="text/javascript">
	var xhr;
	function createXML(){
		try {
			return new XMLHttpRequest();
		} catch (e) {
			return new ActiveXObject();
		}
	}
	function serchkey(){
		var keyword=document.getElementById("sea_input1").value;
		//alert(keyword);
		xhr=createXML();
		xhr.onreadystatechange=callback;
		xhr.open("post","UserSearchServlet",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send("keyword="+keyword);
	}
	function callback(){
		if(xhr.status==200 && xhr.readyState==4){
			var sobj=document.getElementById("suggest");
			sobj.innerHTNL=" ";
			var arr=xhr.responseText.split(",");
			var suggest="";
			if(arr.length>0){
				for(var i=0;i<arr.length;i++){
					suggest+="<div onmouseover='jingguo(this)' onmouseout='likai(this)' onclick='fuzhi(this)'>";
					suggest+=arr[i];
					suggest+="</div>";
				}
				sobj.innerHTML=suggest;
				document.getElementById("suggest").style.display="block";
			}else{
				document.getElementById("suggest").style.display="none";
			}
		}
	}
	
	function jingguo(o){
		o.style.background="#0079C1";
	}
	function likai(obj){
		obj.style.background="";
	}
	function fuzhi(obj){
		document.getElementById("sea_input1").value=obj.innerHTML;
		document.getElementById("suggest").style.display="none";
	}
</script>
</head>
<body>
	<%--如果当前页面已经登陆过这显示用户名--%>
	<c:choose>
		<c:when test="${empty user.uname}">

		</c:when>
		<c:otherwise>
			<script type="text/javascript">
				$(function() {

					$("#top_left").css("display", "none");
					$("#uname").css("display", "block");

				});
			</script>
		</c:otherwise>
	</c:choose>

	<div id="header">
		<div id="top_login">
			<form action="UserLoginServlet" method="post">
				<div id="top_left">
					<label> 登录名 </label> <input type="text" id="name" value=""
						class="login_input" name="uname" /> <label>
						密&#160;&#160;码</label> <input type="password" id="upwd" value=""
						class="login_input" name="pass" /> <input type="checkbox"
						id="nolading" name="noloading" />是否在一周内保存用户名和密码 <input
						type="submit" class="login_sub" id="login_sub" value="登录" /> <input
						type="button" class="register_sub" value="注册"
						onclick="javascript:location.href='register.jsp'" /> <label
						id="error"> </label>
				</div>
			</form>
			<p id="uname">
				欢迎${user.uname}来到新闻页面。&nbsp; &nbsp;<a href="outLogin.jsp"
					name="zhuxiao" id="zhuxiao">注销</a>
			</p>
			<%--搜索框 --%>
			<div class="searchkuang">
				<div class="sea">
					<input type="text" id="sea_input1" onkeyup="serchkey()"/> <input type="submit"
						id="sea_input2" value="搜索" />
				</div>
				<div id="suggest"></div>
			</div>
		</div>


		<div id="nav">

			<img src="Images/ad.gif" alt="" />

		</div>
	</div>

</body>
</html>